<template>
    <div ref="chartRef" style="width:98%; height:300px;"></div>
</template>

<script setup>
/**
 * 会员地区分布饼状图
 * 说明：省份分布人数
 */
import * as echarts from 'echarts';
import { ref, onMounted, inject, watch } from 'vue';

// 获取全局变量
const global = inject('global');
// 声明引用变量
const chartRef = ref(null);
// 声明图表实例
var myChart = null;

// 监听全局变量
watch(global.isDarkTheme, (value) => {
    initChart(value);
})

// 生成模拟数据
const mockData = () => {
    let provinces = ['北京市', '上海市', '天津市', '重庆市', '黑龙江省', '辽宁省', '吉林省', '河北省', '河南省', '湖北省', '湖南省', '山东省', '山西省', '陕西省', '安徽省', '浙江省', '江苏省', '福建省', '广东省', '海南省', '四川省', '云南省', '贵州省', '青海省', '甘肃省', '江西省', '台湾省', '内蒙古自治区', '宁夏回族自治区', '新疆维吾尔自治区', '西藏自治区', '广西壮族自治区', '香港特别行政区', '澳门特别行政区'];
    let data = [];
    for(let name of provinces){
        data.push({ value: Math.ceil(Math.random()*10000), name });
    }
    return data;
}

// 生成图表
const initChart = (isDark) => {
    if (myChart) {
        myChart.dispose();
    }
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(chartRef.value, isDark ? 'dark' : 'light');
    // 绘制图表
    var bizData = {
        data: mockData(),
    };

    var option;

    option = {
        title: {
            text: '会员地区分布图',
            subtext: '无会员地区不显示',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: bizData.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}

// 视图加载方法
onMounted(() => {
    initChart(global.isDarkTheme.value);
})
</script>